<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>draco with three js</title>
  </head>
  <script src="js/three.min.js"></script>
  <script src="js/DRACOLoader.js"></script>
  <script src="js/draco_decoder.js"></script>
  <script src="js/OrbitControls.js"></script>
  <script src="js/MTLLoader.js"></script>
  <script>
    'use strict'
    var camera, cameraTarget, scene, renderer, mtlLoader
    function threejsInit() {
      mtlLoader = new THREE.MTLLoader()

      var container = document.createElement('div')
      document.body.appendChild(container)
      //创建镜头
      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000)
      camera.position.set(3, 0.15, 3)
      //指定镜头朝向
      cameraTarget = new THREE.Vector3(0, 0, 0)
      camera.lookAt(cameraTarget)
      //创建场景
      scene = new THREE.Scene()
      //用白色充当黑色背景
      scene.fog = new THREE.Fog(0xffffff, 2, 15)
      // 添加两个光源，一个黄、一个白
      scene.add(new THREE.HemisphereLight(0x443333, 0x111122))
      addShadowedLight(1, 1, 1, 0xffffff, 5)
      addShadowedLight(0.5, 1, -1, 0xffaa00, 5)
      //创建相机控制
      var controls = new THREE.OrbitControls(camera)
      controls.addEventListener('change', render)
      // 创建渲染器renderer
      renderer = new THREE.WebGLRenderer({ antialias: true })
      renderer.setClearColor(scene.fog.color)
      renderer.setPixelRatio(window.devicePixelRatio)
      renderer.setSize(window.innerWidth, window.innerHeight)
      container.appendChild(renderer.domElement)
      window.addEventListener('resize', onWindowResize, false)
    }
    //监听浏览器窗口大小的变化，从而改变绘制区域
    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()
      renderer.setSize(window.innerWidth, window.innerHeight)
    }
    //刷新每一帧
    function threejsAnimate() {
      requestAnimationFrame(threejsAnimate)
      render()
    }
    function render() {
      renderer.render(scene, camera)
    }
    //添加光源
    function addShadowedLight(x, y, z, color, intensity) {
      const directionalLight = new THREE.DirectionalLight(color, intensity)
      directionalLight.position.set(x, y, z)
      scene.add(directionalLight)
    }
    //缩放模型至合适大小、移动模型至合适位置
    function resizeGeometry(bufferGeometry, material) {
      var geometry
      // Point cloud does not have face indices.
      if (bufferGeometry.index == null) {
        geometry = new THREE.Points(bufferGeometry, material)
      } else {
        bufferGeometry.computeVertexNormals()
        geometry = new THREE.Mesh(bufferGeometry, material)
      }
      // Compute range of the geometry coordinates for proper rendering.
      bufferGeometry.computeBoundingBox()
      const sizeX = bufferGeometry.boundingBox.max.x - bufferGeometry.boundingBox.min.x
      const sizeY = bufferGeometry.boundingBox.max.y - bufferGeometry.boundingBox.min.y
      const sizeZ = bufferGeometry.boundingBox.max.z - bufferGeometry.boundingBox.min.z
      const diagonalSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY + sizeZ * sizeZ)
      const scale = 1.0 / diagonalSize
      const midX = (bufferGeometry.boundingBox.min.x + bufferGeometry.boundingBox.max.x) / 2
      const midY = (bufferGeometry.boundingBox.min.y + bufferGeometry.boundingBox.max.y) / 2
      const midZ = (bufferGeometry.boundingBox.min.z + bufferGeometry.boundingBox.max.z) / 2
      geometry.scale.multiplyScalar(scale)
      geometry.position.x = -midX * scale
      geometry.position.y = -midY * scale
      geometry.position.z = -midZ * scale
      geometry.castShadow = true
      geometry.receiveShadow = true
      return geometry
    }
    // Global Draco decoder type.
    var dracoDecoderType = {}
    var dracoLoader
    function createDracoDecoder() {
      dracoLoader = new THREE.DRACOLoader()
      //dracoLoader.setDracoDecoderType(dracoDecoderType);
    }
    createDracoDecoder()
    // bufferGeometry is a geometry decoded by DRACOLoader.js
    function onDecode(bufferGeometry) {
      const material = new THREE.MeshStandardMaterial({ vertexColors: THREE.VertexColors })
      const geometry = resizeGeometry(bufferGeometry, material)
      const selectedObject = scene.getObjectByName('my_mesh')
      scene.remove(selectedObject)
      geometry.name = 'my_mesh'
      scene.add(geometry)
    }
    // Download and decode the Draco encoded geometry.
    function downloadEncodedMesh(filename) {
      // Download the encoded file.
      const xhr = new XMLHttpRequest()
      xhr.open('GET', filename, true)
      xhr.responseType = 'arraybuffer'
      xhr.onload = function (event) {
        const arrayBuffer = xhr.response
        // var mtlLoader = new THREE.MTLLoader()
        if (arrayBuffer) {
          dracoLoader.setVerbosity(1)
          dracoLoader.decodeDracoFile(arrayBuffer, onDecode)
          dracoLoader.setMaterials
        }
      }
      xhr.send(null)
    }
    window.onload = function () {
      const fileInput = document.getElementById('fileInput')
      fileInput.onclick = function () {
        this.value = ''
      }
      fileInput.addEventListener('change', function (e) {
        const file = fileInput.files[0]
        console.log(file)
        const reader = new FileReader()
        reader.onload = function (e) {
          // Enable logging to console output.
          dracoLoader.setVerbosity(1)
          dracoLoader.decodeDracoFile(reader.result, onDecode)
        }
        reader.readAsArrayBuffer(file)
      })
      threejsInit()
      threejsAnimate()
      //自动加载一个示例模型bunny.drc
      downloadEncodedMesh('models/bunny.drc')
    }
  </script>
  <body>
    <div id="page-wrapper">
      <h1>Open a draco compressed file (.drc):</h1>
      <div>
        <input type="file" id="fileInput" />
      </div>
    </div>
  </body>
</html>
